import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';

import * as IconStories from './Icon.stories';

<Meta of={IconStories} />

# Icon

The Icon component is a versatile UI element used to display SVG icons with consistent styling across the application. It provides accessibility features and supports various sizes and colors to match your design system requirements.

## Usage

<Canvas of={IconStories.Documentation} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const IconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="Close icon"
            size="md"
            color="accent"
        />
    );
};

export default IconExample;

` } }
        additionalActions={[
            {
                title: 'Open in GitHub',
                onClick: () => {
                    window.open(
                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Icon/Icon.tsx',
                        '_blank'
                    );
                },
            }
        ]}
/>

<Controls of={IconStories.Documentation} />

```tsx
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const IconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="Close icon"
            size="md"
            color="accent"
        />
    );
};

export default IconExample;
```

## Examples

### Default

<Canvas of={IconStories.Default} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const DefaultIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="md"
            color="accent"
        />
    );
};

export default DefaultIconExample;
` } } />

### Color Variants

#### Inherit Color

<Canvas of={IconStories.ColorInherit} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const InheritColorIconExample = () => {
    return (
        <div className="fill-success">
            <Icon
                icon={<CloseIcon />}
                label="This is an icon"
                size="md"
                color="inherit"
            />
        </div>
    );
};

    export default InheritColorIconExample;
` } } />

#### Accent Color

<Canvas of={IconStories.ColorAccent} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const AccentIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="md"
            color="accent"
        />
    );
};

export default AccentIconExample;
` } } />

#### Neutral Light Color

<Canvas of={IconStories.ColorNeutralLight} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const NeutralLightIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="md"
            color="neutral-light"
        />
    );
};

    export default NeutralLightIconExample;
` } } />

#### Neutral Strong Color

<Canvas of={IconStories.ColorNeutralStrong} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const NeutralStrongIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="md"
            color="neutral-strong"
        />
    );
};

        export default NeutralStrongIconExample;
` } } />

#### Neutral Strong Transparent Color

<Canvas of={IconStories.ColorNeutralStrongTransparent} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const NeutralStrongTransparentIconExample = () => {
    return (
        <div className="bg-neutral-disabled p-3xl rounded-md">
            <Icon
                icon={<CloseIcon />}
                label="This is an icon"
                size="md"
                color="neutral-strong-transparent"
            />
        </div>
    );
};

export default NeutralStrongTransparentIconExample;
` } } />

#### Neutral Base Color

<Canvas of={IconStories.ColorNeutralBase} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const NeutralBaseIconExample = () => {
    return (
        <div className="bg-neutral-dark p-3xl rounded-md">
            <Icon
                icon={<CloseIcon />}
                label="This is an icon"
                size="md"
                color="neutral-base"
            />
        </div>
    );
};

    export default NeutralBaseIconExample;
` } } />

#### Neutral Negative Color

<Canvas of={IconStories.ColorNeutralNegative} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const NeutralNegativeIconExample = () => {
    return (
        <div className="bg-neutral-dark p-3xl rounded-md">
            <Icon
                icon={<CloseIcon />}
                label="This is an icon"
                size="md"
                color="neutral-negative"
            />
        </div>
    );
};

        export default NeutralNegativeIconExample;
` } } />

### Size Variants

#### Extra Small

<Canvas of={IconStories.SizeXs} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const XsIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="xs"
            color="accent"
        />
    );
};

export default XsIconExample;
` } } />

#### Small

<Canvas of={IconStories.SizeSm} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const SmIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="sm"
            color="accent"
        />
    );
};

export default SmIconExample;
` } } />

#### Medium

<Canvas of={IconStories.SizeMd} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const MdIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="md"
            color="accent"
        />
    );
};

export default MdIconExample;
` } } />

#### Large

<Canvas of={IconStories.SizeLg} source={ { code: `
import React from "react";
import { Icon } from "@webiny/admin-ui";
import { ReactComponent as CloseIcon } from "@webiny/icons/close.svg";

const LgIconExample = () => {
    return (
        <Icon
            icon={<CloseIcon />}
            label="This is an icon"
            size="lg"
            color="accent"
        />
    );
};

export default LgIconExample;
` } } />

